// 首页模块入口
<template>
	<div 
    class="dashboard-container">
		<div 
      class="line">
			<div 
        class="before">

      </div>
			<div 
        class="title">
				系统公告
			</div>
		</div>
		<div 
      class="express">
			<ul>
				<li>
					课程数据采集存在一定的延误性
				</li>
			</ul>
		</div>

		<div 
      class="line">
			<div 
        class="before">
      </div>
			<div 
        class="title">
				更新日志（只展示最近五条数据）
			</div>
		</div>
		<br />
		<el-timeline>
			<el-timeline-item
				timestamp="2024/4/12"
				placement="top"
			>
				<el-card>
					<h4>
						logData[0].title
					</h4>
					<p>
						{{logData[0].user}}
						提交于
						{{logData[0].updateTime}}
					</p>
				</el-card>
			</el-timeline-item>
			<el-timeline-item
				timestamp="2024/4/3"
				placement="top"
			>
				<el-card>
					<h4>
						修复已知bug
					</h4>
					<p>
						{{logData[1].user}}
						提交于
						{{logData[1].updateTime}}
					</p>
				</el-card>
			</el-timeline-item>
			<el-timeline-item
				timestamp="2024/4/2"
				placement="top"
			>
				<el-card>
					<h4>
						修复已知bug
					</h4>
					<p>
						{{logData[2].user}}
						提交于
						{{logData[2].updateTime}}
					</p>
				</el-card>
			</el-timeline-item>
			<el-timeline-item
				timestamp="2024/4/2"
				placement="top"
			>
				<el-card>
					<h4>
						修复已知bug
					</h4>
					<p>
						{{logData[3].user}}
						提交于
						{{logData[3].updateTime}}
					</p>
				</el-card>
			</el-timeline-item>
			<el-timeline-item
				timestamp="2024/4/2"
				placement="top"
			>
				<el-card>
					<h4>
						修复已知bug
					</h4>
					<p>
						{{logData[4].user}}
						提交于
						{{logData[4].updateTime}}
					</p>
				</el-card>
			</el-timeline-item>
		</el-timeline>

	</div>
</template>

<script>
// 引入请求
import request from "@/utils/request";

export default {
	// 组件名称
	name: "Dashboard",
	//   定义数据
	data() {
		return {
			logData: [],
		};
	},
	beforeMount() {},
	mounted() {
		this.init();
	},
	methods: {
		/**
		 * @desc init
		 */
		init() {
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在加载数据，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			let data = {
				num: 5,
			};
			request({
				url: "/vue-admin-template/log/list",
				method: "get",
				data,
			})
				.then((res) => {
					console.log("res", res);
					if (res.data) {
						this.logData = res.data.list;
						// 关闭loading
						setTimeout(() => {
							loading.close();
						}, 500);
					} else {
						// 关闭loading
						setTimeout(() => {
							this.$message({
								message: "数据加载失败",
								type: "error",
							});
							loading.close();
						}, 500);
					}
				})
				.catch((err) => {
					// 关闭loading
					setTimeout(() => {
						this.$message({
							message: "数据加载失败:" + err,
							type: "error",
						});
						loading.close();
					}, 500);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.dashboard-container {
	padding: 10px;
	.express {
		padding: 10px 0px;
		background: rgb(216, 213, 213);
		margin-bottom: 20px;
		h4 {
			margin: 10px 20px;
		}
		li {
			margin: 20px 0px;
		}
	}
	.line {
		height: 40px;
		background: rgb(55, 141, 221);
		margin: 10px 0px;
		display: flex;
		justify-content: flex-start;
		.before {
			height: 100%;
			width: 20px;
			background: rgb(29, 221, 189);
		}
		.title {
			color: #fff;
			font-size: 18px;
			font-weight: 700;
			height: 40px;
			line-height: 40px;
			margin: 0px 10px;
		}
	}
}
</style>
